<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Photo Stack Test</title>
	<link href="photo-stack.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" language="javascript1.5" src="jquery-1.4.2.min.js"></script>
	<script type="text/javascript" language="javascript1.5" src="jquery.photostack.js"></script>
	<script>
		$(document).ready(function(){
				$('div.images').photostack({
				'speed':400,
				'float':'left'
			});
		});
	</script>
</head>

<body>
	<div id="container">
		<div id="head">
			<h1>Photo Stack</h1>
		</div>
		<div id="body" style="padding:10px;">
        		<p><strong>Overview: </strong>Utilizing the jQuery rotate plugin, this plugin extension takes a container of images and renders them in a stack using the viewing browser's optimal display method. CSS3 for Webkit, Canvas for FireFox, and VML for Internet Explorer.</p>
        		<p><strong>Include:</strong></p> <ol style="padding-left:40px;"><li>jQuery</li><li>jquery.photo-stack.js</li><li>photo-stack.css</li></ol><br />

				<p><strong>Use:</strong> $(selector for containing div).photostack({'attribute':'value'});</p>
				<h2>accepted arguments:</h2>
                <table border="1" style="margin-bottom:40px;">
                <tr><th>attribute</th>
                <th>value(s)</th>
                <th>use</th>
                </tr>
                <tr>
                <td>speed</td>
                <td>integer > 0; default 200</td>
                <td>time in MS for shuffle animation</td>
                </tr>
                <tr>
                <td>float</td>
                <td>right, left, none; default none</td>
                <td>Determines float of image stack</td>
                </tr>
                <tr>
                <td>captionOffset</td>
                <td>integer > 0; default 75</td>
                <td>caption vertical offset from bottom of pictures</td>
                </tr>
                <tr>
                <td>photostackClass</td>
                <td>alphanumeric, default "photostack"</td>
                <td>name of class added to containing div</td>
                </tr>
                 <tr>
                <td>padding</td>
                <td>integer > 0; default 45</td>
                <td>used to increase the size of the containing div beyond the dimension of the images</td>
                </tr>
                <tr>
                <td>overlay</td>
                <td>true, false, default true</td>
                <td>toggles translucent call to action overlay on page load</td>
                </tr>
                <tr>
                <td>overlay_msg</td>
                <td>alphanumeric, default "click to view"</td>
                <td>message in translucent overlay</td>
                </tr>
                </tr>
                <tr>
                <td>caption_txt</td>
                <td>hex (include #), default "#000000"</td>
                <td>caption text color</td>
                </tr>
                <tr>
                <td>caption_clr</td>
                <td>hex (include #), default "transparent"</td>
                <td>caption background color</td>
                </tr>
                </table>
                
                
                <div class="images">
					
                 	<img src="images/1.jpg" width="350" height="350" />
					<p>The perks of being tall</p>
						
					<img src="images/2.jpg" width="350" height="350" alt="Uofb 4 9 08 0475">
					<p>Birthday Party</p>
          
					<img src="images/3.jpg" width="350" height="350" alt="Uofb 5 6 08 0082">
					<p>Prudens Purple Tomato Plant</p>
          
              
					<img src="images/4.jpg"width="350" height="350" alt="Uofb 5 6 08 0116">
					<p>Baltimore Skyline</p>
        
					<img src="images/5.jpg" width="350" height="350" alt="UofB 5 6 08 0291">
					<p>USS Constellation</p> 
				</div>
                
				<p>Nullam luctus diam sit amet mi lobortis hendrerit. Suspendisse a dui nulla, in euismod nisl. Cras convallis consequat dui laoreet ornare. Praesent vel diam lacus. Nam rhoncus euismod euismod. Nullam nulla neque, pellentesque et sodales a, tristique ut nulla. Sed dictum luctus tellus, eu pretium nibh consectetur ac.</p>
				<p>Praesent quis nisl vulputate urna hendrerit eleifend. Mauris ac arcu sem. Sed posuere vestibulum lorem quis pretium. In auctor faucibus viverra. Cras ut ullamcorper tortor. Vestibulum condimentum convallis vehicula. Ut facilisis, tellus nec auctor malesuada, odio sapien pharetra massa, non sollicitudin mi tellus non urna. Vestibulum non felis vel turpis interdum venenatis sit amet eu magna. Aliquam ac bibendum est. Quisque dignissim nulla a tortor consectetur consequat. Pellentesque id dolor id diam semper luctus id sed erat. Suspendisse viverra molestie semper.</p>
			
			
				
				
			<br class="clear" />
		</div>
		<div id="foot">
		</div>
	</div>
</body>
</html>
